<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
<style media="screen">
	#main .lost_rate {
		background-color: #fdf6ec;
		color: #e6a23c;
	}
	#main .lost_rate_on_week {
		background-color: #f0f9eb;
		color: #67c23a;
	}
	#main .el-pagination__jump{
		margin-left: 0;
	}
	#main .el-pagination__editor.el-input{
		width: 32px;
	}
	#main .el-pagination .btn-prev{
		padding-right: 0;
	}
	#main .el-pagination .btn-next{
		padding-left: 0;
	}
	#main .el-pagination__total{
		margin-right: 0;
	}
	#main .el-pagination{
		padding:2px 0;
	}
</style>
<div id="main">
	<div class="search-tool-box">
		<el-row :gutter="15">
			<el-col :md="24">
				<el-card class="box-card">
					<el-collapse v-model="open_tool_box">
						<el-collapse-item name="true">
							<template slot="title">
								<h4>查询工具栏</h4>
							</template>
							<el-form :inline="true" :model="seaForm">
								<el-form-item label="学年">
									<el-date-picker v-model="seaForm.year" type="year"
									    placeholder="学年" value-format="yyyy" size="small">
								    </el-date-picker>
								</el-form-item>
								<el-form-item label="学期">
									<el-select v-model="seaForm.season" filterable size="small" clearable placeholder="学期">
										<el-option label="春季学期" value="1"></el-option>
										<el-option label="秋季学期" value="2"></el-option>
			 						</el-select>
								</el-form-item>
								<el-form-item label="起始周">
									<el-select v-model="seaForm.start_week" filterable size="small" clearable placeholder="起始周">
										@foreach ($opt_start as $v)
											<el-option label="{{$v['label']}}" value="{{$v['value']}}"></el-option>
										@endforeach
			 						</el-select>
								</el-form-item>
								<el-form-item label="结束周">
									<el-select v-model="seaForm.end_week" filterable size="small" clearable placeholder="结束周">
										@foreach ($opt_end as $v)
											<el-option label="{{$v['label']}}" value="{{$v['value']}}"></el-option>
										@endforeach
			 						</el-select>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="doSearch" size="small">查询</el-button>
								</el-form-item>
							</el-form>
						</el-collapse-item>
					</el-collapse>
				</el-card>
			</el-col>
		</el-row>
	</div>
	<div class="container-box">
		<el-row :gutter="15">
			<el-col :md="24">
				<el-card class="el-card-box">
					<div slot="header" class="el-card-header">
						<h4>数据总览</h4>
					</div>
					<div class="el-card-body">
						<el-table :data="overviewTable" border v-loading="loading.overview" size="small">
							<el-table-column sortable align="center" label="" prop="week"></el-table-column>
							<el-table-column align="center" label="一段班">
								<el-table-column sortable align="center" label="总人数" prop="total_1">
								</el-table-column>
								<el-table-column sortable align="center" label="流失人数" prop="lost_1">
								</el-table-column>
								<el-table-column sortable align="center" label="流失率" prop="rate_1" class-name="lost_rate">
								</el-table-column>
								<el-table-column sortable align="center" label="同周占比" prop="rate_1_week" class-name="lost_rate_on_week">
								</el-table-column>
							</el-table-column>
							<el-table-column align="center" label="二段班" class-name="stage_2">
								<el-table-column sortable align="center" label="总人数" prop="total_2">
								</el-table-column>
								<el-table-column sortable align="center" label="流失人数" prop="lost_2">
								</el-table-column>
								<el-table-column sortable align="center" label="流失率" prop="rate_2" class-name="lost_rate">
								</el-table-column>
								<el-table-column sortable align="center" label="同周占比" prop="rate_2_week" class-name="lost_rate_on_week">
								</el-table-column>
							</el-table-column>
						</el-table>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<el-row :gutter="15">
			<el-col :md="6">
				<el-card class="el-card-box">
					<div slot="header" class="el-card-header">
						<h4>开班段统计</h4>
					</div>
					<div class="el-card-body">
						<el-table :data="startlessonTable" border v-loading="loading.startlesson" size="mini"
							>
							<el-table-column align="center" label="班段" prop="squad_batch" sortable></el-table-column>
							<el-table-column align="center" label="流失" prop="lost" sortable></el-table-column>
						</el-table>
						<el-pagination
							align="right" small
							@current-change="pageChange($event,0)"
							:current-page="pages.startlesson.pageNumber"
							:page-sizes="[10, 25, 50]"
							:page-size="pages.startlesson.pageSize"
							layout="total,prev,jumper,next"
							:total="pages.startlesson.total">
						</el-pagination>
					</div>
				</el-card>
			</el-col>
			<el-col :md="6">
				<el-card class="el-card-box">
					<div slot="header" class="el-card-header">
						<h4>班级统计</h4>
					</div>
					<div class="el-card-body">
						<el-table :data="lessonTable" border v-loading="loading.lesson" size="mini"
							>
							<el-table-column sortable align="center" label="班级" prop="name"></el-table-column>
							<el-table-column sortable align="center" label="流失" prop="lost"></el-table-column>
							<el-table-column sortable align="center" label="班主任" prop="tutor_name"></el-table-column>
						</el-table>
						<el-pagination
							align="right" small
							@current-change="pageChange($event,1)"
							:current-page="pages.lesson.pageNumber"
							:page-size="pages.lesson.pageSize"
							layout="total,prev,jumper,next"
							:total="pages.lesson.total">
						</el-pagination>
					</div>
				</el-card>
			</el-col>
			<el-col :md="6">
				<el-card class="el-card-box">
					<div slot="header" class="el-card-header">
						<h4>班主任统计</h4>
					</div>
					<div class="el-card-body">
						<el-table :data="tutorTable" border v-loading="loading.tutor" size="mini"
							>
							<el-table-column sortable align="center" label="班主任" prop="tutor_name"></el-table-column>
							<el-table-column sortable align="center" label="流失总数" prop="lost"></el-table-column>
						</el-table>
						<el-pagination
							align="right" small
							@current-change="pageChange($event,2)"
							:current-page="pages.tutor.pageNumber"
							:page-sizes="[10, 25, 50]"
							:page-size="pages.tutor.pageSize"
							layout="total,prev,jumper,next"
							:total="pages.tutor.total">
						</el-pagination>
					</div>
				</el-card>
			</el-col>
			<el-col :md="6">
				<el-card class="el-card-box">
					<div slot="header" class="el-card-header">
						<h4>章节统计</h4>
					</div>
					<div class="el-card-body">
						<el-table :data="chapterTable" border v-loading="loading.chapter" empty-text="正在努力开发中..."
							>
							<el-table-column sortable align="center" label="序号" prop="week"></el-table-column>
							<el-table-column sortable align="center" label="章节" prop="total_1"></el-table-column>
							<el-table-column sortable align="center" label="总人数" prop="lost_1"></el-table-column>
						</el-table>
						<el-pagination
							align="right" small
							@current-change="pageChange($event,3)"
							:current-page="pages.chapter.pageNumber"
							:page-sizes="[10, 25, 50]"
							:page-size="pages.chapter.pageSize"
							layout="total,prev,jumper,next"
							:total="pages.chapter.total">
						</el-pagination>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</div>
<script type="text/javascript">
let main = new Vue({
	el:"#main",
	data:{
		pages:{
			startlesson:{pageSize:15,pageNumber:1,total:0},
			lesson:{pageSize:15,pageNumber:1,total:0},
			tutor:{pageSize:15,pageNumber:1,total:0},
			chapter:{pageSize:15,pageNumber:1,total:0}
		},
		loading:{
			overview:true,startlesson:true,lesson:true,tutor:true,chapter:false
		},
		open_tool_box:"false",
		seaForm:{
			start_week:"{{$default_week['start']}}",
			end_week:"{{$default_week['end']}}",
			year:"{{$default_year}}",
			season:"{{$default_season}}"
		},
		overviewTable:[],overviewTableAll:[],
		startlessonTable:[],startlessonTableAll:[],
		lessonTable:[],lessonTableAll:[],
		tutorTable:[],tutorTableAll:[],
		chapterTable:[],chapterTableAll:[]
	},
	mounted:function() {
		this.init();
	},
	methods:{
		init() {
			this.getOverviewTable();
			this.getStartlessonTable();
			this.getLessonTable();
			this.getTutorTable();
			this.getChapterTable();
		},
		getOverviewTable() {
			this.loading.overview = true;
			var param = this.seaForm;
			$.get("./report_loss/get_overview_table",param,function(res) {
				if(res.code == 1){
					main.overviewTable = res.data;
				}else{
					main.$notify.error({title:"Error",message:"“数据总览表”获取数据失败，请稍后"});
				}
				main.loading.overview = false;
			});
		},
		getStartlessonTable() {
			this.loading.startlesson = true;
			var param = {
				start_week:this.seaForm.start_week,
				end_week:this.seaForm.end_week,
				year:this.seaForm.year,
				season:this.seaForm.season
			};
			$.get("./report_loss/get_startlesson_table",param,function(res) {
				if(res.code == 1){
					main.startlessonTableAll = res.data.rows;
					main.pages.startlesson.total = res.data.total;
					main.doPage(0);
				}else{
					main.$notify.error({title:"Error",message:"“开办段统计表”获取数据失败，请稍后"});
				}
				main.loading.startlesson = false;
			});
		},
		getLessonTable() {
			this.loading.lesson = true;
			var param = {
				start_week:this.seaForm.start_week,
				end_week:this.seaForm.end_week,
				year:this.seaForm.year,
				season:this.seaForm.season
			};
			$.get("./report_loss/get_lesson_table",param,function(res) {
				if(res.code == 1){
					main.lessonTableAll = res.data.rows;
					main.pages.lesson.total = res.data.total;
					main.doPage(1);
				}else{
					main.$notify.error({title:"Error",message:"“班级统计表”获取数据失败，请稍后"});
				}
				main.loading.lesson = false;
			});
		},
		getTutorTable() {
			this.loading.tutor = true;
			var param = {
				start_week:this.seaForm.start_week,
				end_week:this.seaForm.end_week,
				year:this.seaForm.year,
				season:this.seaForm.season
			};
			$.get("./report_loss/get_tutor_table",param,function(res) {
				if(res.code == 1){
					main.tutorTableAll = res.data.rows;
					main.pages.tutor.total = res.data.total;
					main.doPage(2);
				}else{
					main.$notify.error({title:"Error",message:"“班主任统计表”获取数据失败，请稍后"});
				}
				main.loading.tutor = false;
			});
		},
		getChapterTable() {
			// 开发中...
			return false;
		},
		doSearch() {
			this.init();
		},
		pageChange(val,i) {
			switch (i) {
				case 0:
					this.pages.startlesson.pageNumber = val;
					break;
				case 1:
					this.pages.lesson.pageNumber = val;
					break;
				case 2:
					this.pages.tutor.pageNumber = val;
					break;
				default:
					break;
			}
			this.doPage(i);
		},
		doPage(i) {
			switch (i) {
				case 0:
					var pageSize = this.pages.startlesson.pageSize;
					var pageNumber = this.pages.startlesson.pageNumber;
					var offset = (pageNumber - 1) * pageSize;
					var end = offset + pageSize;
					this.startlessonTable = [];
					for(var j=offset;j<end;j++){
						if(j<this.startlessonTableAll.length){
							this.startlessonTable.push(this.startlessonTableAll[j]);
						}else{
							break;
						}
					}
					break;
				case 1:
					var pageSize = this.pages.lesson.pageSize;
					var pageNumber = this.pages.lesson.pageNumber;
					var offset = (pageNumber - 1) * pageSize;
					var end = offset + pageSize;
					this.lessonTable = [];
					for(var j=offset;j<end;j++){
						if(j<this.lessonTableAll.length){
							this.lessonTable.push(this.lessonTableAll[j]);
						}else{
							break;
						}
					}
					break;
				case 2:
					var pageSize = this.pages.tutor.pageSize;
					var pageNumber = this.pages.tutor.pageNumber;
					var offset = (pageNumber - 1) * pageSize;
					var end = offset + pageSize;
					this.tutorTable = [];
					for(var j=offset;j<end;j++){
						if(j<this.tutorTableAll.length){
							this.tutorTable.push(this.tutorTableAll[j]);
						}else{
							break;
						}
					}
					break;
				default:
					break;
			}
		}
	}
})
</script>
